<template>
  <div class="app-container">
    <div style="display: flex; align-items: center;">
      <el-image style="width: 100px; height: 100px; margin-right: 10px;" :src="url">
      </el-image>
      <h1>成顺采购管理系统</h1>
    </div>
    <div class="topNav">
      <span>首页</span>
      <span>招标信息</span>
      <span>采购信息</span>
      <span>政策法规</span>
      <span>公共信息</span>
      <span>帮助中心</span>
      <span>联系我们</span>
    </div>
    <div>
      <el-carousel class="login" height="530px" v-if="currentPage === 'login'">
        <el-carousel-item v-for="(item,index) in imageList" :key="item">
          <img :src="item" style="width: 100%; height: 100%;" alt="描述文本" @click="handleClick(index)">
        </el-carousel-item>
      </el-carousel>
      <el-form ref="loginForm" style="z-index: 1000;" :model="loginForm" :rules="loginRules" class="login-form">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h3 class="title">成顺采购管理系统</h3>
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
            @keyup.enter.native="handleLogin">
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="code" v-if="captchaEnabled">
          <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
            @keyup.enter.native="handleLogin">
            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img" />
          </div>
        </el-form-item>
        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
        <el-form-item style="width:100%;">
          <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
            @click.native.prevent="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
          <div style="float: right;" v-if="register">
            <router-link class="link-type" :to="'/register'">立即注册</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>

      <!-- 今日开标和通知公告区域 -->
      <div class="content-section">
        <div class="info-card half-width">
        <div class="card-header"> 
          <div class="title-box">今日开标</div>
          <el-button type="warning" size="small" class="more-btn">更多</el-button>
        </div>
        <div class="card-content">
          <el-table :data="todayData" style="width: 100%">
            <el-table-column prop="iNumber" label="项目编号">
              <template slot-scope="scope">
                <router-link class="link-type" :to="`/purchaseNotice/${scope.row.iNumber}`">
                  {{ scope.row.iNumber }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column prop="iName" label="项目名称"  align="center"/>
            <el-table-column prop="projectState" align="center" label="项目状态">
              <template slot-scope="scope">
               <el-tag :type="scope.row.projectState == 3 ? 'warning' : 'success'">
                  {{ scope.row.projectState == 3 ? '开标中' : '已开标' }}
               </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="iUnit" label="招标单位" align="center"/>
          </el-table>
        </div>
      </div>

    <!-- 通知公告 -->
    <div class="info-card half-width">
          <div class="card-header">
            <div class="title-box">通知公告</div>
            <el-button type="warning" size="small" class="more-btn">更多</el-button>
          </div>
          <div class="card-content">
            <el-table :data="noticeData">
              <el-table-column prop="noticeTitle" label="公告标题">
                <template slot-scope="scope">
                  <router-link class="link-type" :to="`/noticePage/${scope.row.noticeId}`">
                    {{ scope.row.noticeTitle }}
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column prop="createBy" label="单位" />
              <el-table-column prop="createTime" label="发布时间" />
            </el-table>
          </div>
        </div>
      </div>

    <!-- 招标信息和中标结果区域 -->
    <div class="content-section">
        <!-- 招标信息 -->
        <div class="info-card half-width">
          <div class="card-header">
            <div class="title-box">招标信息</div>
            <el-button type="warning" size="small" class="more-btn">更多</el-button>
          </div>
          <div class="card-content">
            <el-table :data="csTenders">
              <el-table-column prop="iNumber" label="招标编号">
                <template slot-scope="scope">
                  <router-link class="link-type" :to="`/purchaseNotice/${scope.row.iNumber}`">
                    {{ scope.row.iNumber }}
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column prop="iName" align="center" label="招标标题" />
              <el-table-column prop="iUnit" align="center" label="招标单位" />
              <el-table-column prop="projectState" align="center" width="70"  label="状态">
                <template slot-scope="scope">
                  <el-tag :type="getStatusType(scope.row.projectState)">
                    {{ getStatusText(scope.row.projectState) }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="pBudget" label="金额" align="center">
                <template slot-scope="scope">
                  {{ formatMoney(scope.row.pBudget) }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <!-- 中标结果表格 -->
        <div class="info-card half-width">
          <div class="card-header">
            <div class="title-box">中标结果</div>
            <el-button type="warning" size="small" class="more-btn">更多</el-button>
          </div>
          <div class="card-content">
            <el-table :data="biddingData">
              <el-table-column prop="iNumber" label="招标编号">
                <template slot-scope="scope">
                  <router-link class="link-type" :to="`/purchaseNotice/${scope.row.iNumber}`">
                    {{ scope.row.iNumber }}
                  </router-link>
                </template>
              </el-table-column>
              <el-table-column prop="resultTitle" label="招标标题" />
              <el-table-column prop="hName" label="中标单位" />
              <el-table-column prop="gsResDate" label="时间" />
            </el-table>
          </div>
        </div>
    </div>
  </div>

</template>

<script>
import { getLoginTenderInfo } from '../api/system/purchase';
import { listNotice } from '../api/system/notice';
import { getCodeImg } from "@/api/login";
import logoImg from '@/assets/logo/logo.png'
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import { tzNotice } from "@/api/system/notice.js"
import { teNotice } from "@/api/expert/tender.js"
// import firstImage from '../assets/images/cgtp.jpg'
import secondImage from '../assets/images/ztb.png'
import thirdImage from '../assets/images/dzztb.png'
import fourthImage from '../assets/images/zysx.png'
import NoticePage from './noticePage.vue';
export default {
  name: "Login",
  data() {
    return {
      biddingData: [],
      noticeData: [],
      csTenders: [],
      loadingIndex: 1,
      todayData: [],
      url: logoImg,
      imageList: [secondImage, thirdImage, fourthImage],
      logo: logoImg,
      showAll: false, // 控制是否显示所有通知
      tablemop: [{
        titleop: "如何找回密码？",
        title: "2012-09-21"
      }],
      tablenotice: [],
      tablenotices: [],
      activeIndex2: '1', // 默认选中的菜单项
      currentPage: 'login', // 当前页面，初始为登录页面
      codeUrl: "",
      loginForm: {
        username: "admin",
        password: "admin123",
        rememberMe: false,
        code: "",
        uuid: ""
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" }
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      // 验证码开关
      captchaEnabled: true,
      // 注册开关
      register: true,
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  computed: {
    displayedNotices() {
      // 根据 showAll 的状态决定显示几个通知
      return this.showAll ? this.tablenotices : this.tablenotices.slice(0, 4);
    },
  },
  created() {
    this.getLoginTenderInfo();
    this.getListNotice();
    this.getCode();
    this.getCookie();
  },
  methods: {
    showMe(){
      this.openFullScreen2();
    },
    handleClick(val){
      if(val==2){
        this.$router.push({path:'/noticePage/'+10})
      }else if(val==1){
        this.$router.push({path:'/noticePage/'+11})
      }
    },
    getListNotice() {
      listNotice().then(res => {
        this.noticeData = res.rows
      })
    },
    getLoginTenderInfo() {
      getLoginTenderInfo().then(res => {
        this.todayData = res.data.todayList;
        this.csTenders = res.data.csTenders;
        this.biddingData = res.data.bidTenderList;
      })
    },
    changeTable(val) {
      this.loadingIndex = val;
    },
    toggleShowAll() {
      this.showAll = !this.showAll; // 切换显示状态
    },
    handleSelect(index) {
      this.activeIndex2 = index; // 更新激活的菜单项
      if (index === '2') { // 如果点击的是公告中心
        this.currentPage = 'announcement'; // 更改为公告页面
        this.crurpage();
      } else {
        this.currentPage = 'login'; // 其他选项则返回登录页面
      }
    },
    crurpage() {
      tzNotice().then(response => {
        this.tablenotice = response;
      }).catch(error => {
        console.error("获取数据失败", error);
      }),
        teNotice().then(response => {
          this.tablenotices = response;
        }).catch(error => {
          console.error("获取数据失败", error);
        })
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
          }
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(() => { });
            this.$store.getters.flags=true;
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
        }
      });
    },
     // 格式化金额
   formatMoney(value) {
     if (!value) return '0.00';
     return '¥ ' + Number(value).toLocaleString('zh-CN', {
       minimumFractionDigits: 2,
       maximumFractionDigits: 2
     });
   },
   // 获取状态标签类型
   getStatusType(status) {
     const statusMap = {
       1: 'info',    // 进行中
       2: 'warning', // 待审核
       3: 'success', // 已完成
       4: 'danger'   // 已取消
     };
     return statusMap[status] || 'info';
   },
   // 获取状态文本
   getStatusText(status) {
    console.log(status,"SD放松放");
    
     const statusMap = {
       1: '立项中',
       2: '招标中',
       3: '投标中',
       4: '开标中',
       5: '评标中',
       6: '定标中',
       7: '废标',
       8: '完成',
     };
     return statusMap[status];
   }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">

/* 清理重复的样式定义 */
.content-section {
  display: flex;
  gap: 20px;
  margin: 0 20px 20px;
  width: calc(100% - 40px);
}

.info-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;

  &.half-width {
    flex: 1;
    width: 50%;  /* 确保宽度为50% */
    min-width: 0;
  }
}
// .content-section {
//   display: flex;
//   gap: 20px;
//   margin: 0 20px 20px;
//   width: calc(100% - 40px);

//   .info-card {
//     flex: 1;
//     min-width: 0;
//   }
// }


/* 卡片样式 */
.info-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;

  &.half-width {
    flex: 1;
    min-width: 0;
  }
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid #e4e7ed;
}

/* 标题框样式 */
.title-box {
  display: inline-block;
  padding: 0 25px;
  line-height: 50px;
  background-color: rgb(34, 109, 207);
  color: white;
  font-size: 16px;
  min-width: 120px;
  text-align: center;
}

/* 更多按钮样式 */
.more-btn {
  margin-right: 15px;
  background-color: rgb(246, 181, 78);
  border: none;
  color: white;

  &:hover {
    background-color: rgb(236, 171, 68);
    color: white;
  }
}

/* 内容区域样式 */
.card-content {
  padding: 15px;
  overflow: auto;
}

/* 表格样式 */
.el-table {
  .link-type {
    color: #409EFF;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

/* 状态标签样式 */
.el-tag {
  border-radius: 4px;
}
.container {
  margin-bottom: 10px;
}

.tenderBor {
  width: 100%;
}

.todayOpening {
  width: 58%;
  height: auto;
}

.noticeMessage {
  width: 46%;
  height: auto;
}

.sm-button {
  float: right;
  // width: 55px;
  text-align: center;
  color: white;
  height: 30px;
  background-color: rgb(246, 181, 78);
  margin-top: -40px;
}

.sm-title {
  display: block;
  line-height: 60px;
  text-align: center;
  background-color: rgb(34, 109, 207);
  color: white;
  width: 85px;
  height: 55px;
}

.sm-title2 {
  display: block;
  line-height: 60px;
  text-align: center;
  background-color: rgb(34, 109, 207);
  color: white;
  width: 85px;
  margin-left: 0.1px;
  height: 55px;
}

.sm-title3 {
  display: block;
  line-height: 60px;
  text-align: center;
  background-color: rgb(34, 109, 207);
  color: white;
  width: 85px;
  margin-left: 0.1px;
  height: 55px;
}

.topNav {
  text-align: center;
  /* 文本居中对齐 */
  background-color: #f8f8f8;
  /* 背景颜色 */
  padding: 10px;
  /* 添加一些内边距 */
  background-color: rgb(10, 183, 227);
  width: 100%;
  height: 60px;
  color: white;
  font-size: 20px;
  margin-bottom: 10px;
  /* 设置底部外边距为10px */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
  /* 添加下方阴影 */
}

.topNav span {
  display: inline-block;
  /* 设置为行内块元素 */
  margin: 0 55px;
  /* 添加左右间距 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  /* 添加阴影效果 */

}


.sidebar-logo {
  width: 64px;
  height: 64px;
  vertical-align: middle;
  margin-top: -17.5px;
  margin-left: 6.3%;
  position: absolute;
  /* 或者使用 absolute/fixed，根据布局需要 */
  z-index: 10;
  /* 确保图像在其他元素之上 */
}


.logo {
  position: absolute;
  left: 100px;
  top: 10px;
}


.tp {
  width: 130px;
  height: 60px;
}

.login {
  justify-content: right;
  align-items: center;
  // background-image: url("../assets/images/cgtp.jpg");
  background-size: cover;
  width: 100%;
  margin-bottom: 15px;
  /* 修改成视口高度的60% */
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.login-form {
  position: absolute;
  left: 1070px;
  top: 245px;
  margin-right: 20px;
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  // background: #ffffff;
  width: 350px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.login-code-img {
  height: 38px;
}
.container {
  display: flex;
  gap: 20px;  /* 设置两个卡片之间的间距 */
  margin-bottom: 20px;
  width: 100%;
}

.info-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;

  &.half-width {
    flex: 1;  /* 让两个卡片平均分配宽度 */
    min-width: 0;  /* 防止内容溢出 */
  }

  &.full-width {
    width: 100%;
  }
}

/* ... 其他样式保持不变 ... */

.card-content {
  padding: 15px;
  overflow: auto;  /* 添加滚动条，防止内容溢出 */
}

/* 表格列宽度调整 */
.el-table {
  .el-table__header-wrapper,
  .el-table__body-wrapper {
    min-width: 100%;
  }
}
// /* 内容区域布局 */
// .content-section {
//   display: flex;
//   gap: 20px;
//   margin-bottom: 20px;
//   padding: 0 20px;
// }

/* 卡片样式 */
.info-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;

  &.half-width {
    flex: 1;
    width: 50%; /* 确保宽度为50% */
    min-width: 0;
  }
}

/* 卡片头部样式 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid #e4e7ed;
}

/* 标题框样式 */
.title-box {
  display: inline-block;
  padding: 0 25px;
  line-height: 50px;
  background-color: rgb(34, 109, 207);
  color: white;
  font-size: 16px;
  min-width: 120px;
  text-align: center;
}

/* 更多按钮样式 */
.more-btn {
  margin-right: 15px;
  background-color: rgb(246, 181, 78);
  border: none;
  color: white;

  &:hover {
    background-color: rgb(236, 171, 68);
    color: white;
  }
}

/* 内容区域样式 */
.card-content {
  padding: 15px;
  height: 300px; /* 固定高度 */
  overflow: auto;
}

/* 表格样式 */
.el-table {
  width: 100%;
  
  .link-type {
    color: #409EFF;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

/* 移除旧的样式 */
.container,
.tenderBor,
.todayOpening,
.noticeMessage {
  display: none;
}
</style>